//首页菜单组件
<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="handleLeave">
      <dt>全部分类</dt>
      <!-- @mouseenter 鼠标经过左侧导航栏名称触发事件 -->
      <!-- menu 应该遍历是state动态数据 $store.state.home.menu -->
      <dd v-for="(item, index) in menu" :key="index" @mouseenter="handleEnter">
        <i :class="item.type"></i>
        {{ item.name }}
        <span class="arrow"></span>
      </dd>
    </dl>
    <!-- 鼠标进入/离开详细列表时触发事件 -->
    <div
      class="detail"
      v-if="kind"
      @mouseenter="handleDetailEnter"
      @mouseleave="handleDetailLeave"
    >
      <template v-for="(item, index) in curDetail.child">
        <h4 :key="index">{{ item.title }}</h4>
        <span v-for="childItem in item.childArr">{{ childItem }}</span>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //记录鼠标hover在分类名称上的数据
      kind: "",
      menu: [
        {
          type: "food",
          name: "美食",
          child: [
            {
              title: "美食",
              childArr: ["代金券", "甜品饮品", "火锅", "自助餐", "小吃快餐"],
            },
          ],
        },
        {
          type: "takeout",
          name: "外卖",
          child: [
            {
              title: "外卖",
              childArr: ["美团外卖"],
            },
          ],
        },
        {
          type: "hotel",
          name: "酒店",
          child: [
            {
              title: "酒店星级",
              childArr: ["经典型", "舒适/三星", "高档/四星", "豪华/五星"],
            },
          ],
        },
      ],
    };
  },
  computed: {
    //计算出鼠标经过当前数组数据显示指定的详细列表
    curDetail() {
      //拿的是数组第0项
      //筛选menu数组里符合条件的某一项对象
      return this.menu.filter((item) => item.type === this.kind)[0];
    },
  },
  methods: {
    handleEnter(e) {
      /**
      // console.log(e.target);
       * <dd data-v-d1292c12="">
       *   <i class="hotel" data-v-d1292c12=""></i>
       *   酒店
       *   <span class="arrow" data-v-d1292c12=""></span>
       * </dd>
       */
      //------------------------------------------------------
      // console.log(e.target.getElementsByTagName("i")[0]);
      //<i class="food" data-v-d1292c12=""></i>
      //------------------------------------------------------
      // console.log(e.target.getElementsByTagName("i")[0].className);
      // hotel/food/takeout
      this.kind = e.target.getElementsByTagName("i")[0].className;
    },
    handleLeave() {
      var _self = this;

      _self._timer = setTimeout(() => {
        //不保留详细列表卡片
        _self.kind = "";
      }, 200);
    },
    handleDetailEnter() {
      //不清空计时器，不执行内部代码，意味着详细列表卡片保留
      clearTimeout(this._timer);
    },
    handleDetailLeave() {
      //不保留详细列表卡片
      this.kind = "";
    },
  },
};
</script>

<style lang="scss" scoped>
</style>